<template>
    <div class="page bg-white">
        <div style="width:100%;text-align:center;font-weight:600;font-size:20px;margin-bottom:10px"><p>{{currentYears}}年{{fatherMeanName}}成本报表</p></div>
        <el-tabs type="border-card" @tab-click="handleClick" v-model="handleClickNum" style="height:100%">
            <el-tab-pane :key="index"  v-for="(item, index) in optionsList" :label="item.title" :name="item.name">
                <div class="top">
                    <el-table :data="tableData" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;" @cell-click="amountDetails"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column type="index" width="200" label="成本明细" fixed="left" align="center"  :index="indexMethod" show-overflow-tooltip/>
                        <el-table-column prop="January" label="1月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="February" label="2月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="March" label="3月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="April" label="4月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="May" label="5月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="June" label="6月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="July" label="7月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="August" label="8月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="September" label="9月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="October" label="10月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="November" label="11月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="December" label="12月" align="center" show-overflow-tooltip/>
                        <el-table-column prop="sum" label="合计" align="center" show-overflow-tooltip/>
                        <el-table-column prop="" label="备注" width="250" show-overflow-tooltip/>
                    </el-table>
                </div>
                
            </el-tab-pane>
        </el-tabs>
        <el-dialog width="50%" :visible.sync="costDetailDialog" v-dialogDrag title="办公费用明细">
            <el-table :data="costDetailList" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;" @cell-click="threeAmountDetails"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column prop="data" label="时间" align="center" show-overflow-tooltip/>
                        <el-table-column prop="department" label="部门" align="center" show-overflow-tooltip/>
                        <!-- <el-table-column prop="userName" label="人员" align="center"/> -->
                        <el-table-column prop="money" label="金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
                    </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="costDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="costDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="50%" :visible.sync="threeCostDetailDialog"  v-dialogDrag title="办公费用明细">
            <el-table :data="threeCostDetailList" :cell-style="cellStyle" 
                    style="border: 1px solid #d6cfe2;"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column prop="data" label="时间" align="center" show-overflow-tooltip/>
                        <!-- <el-table-column prop="department" label="部门" align="center"/> -->
                        <el-table-column prop="userName" label="人员" align="center" show-overflow-tooltip/>
                        <el-table-column prop="money" label="金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
                    </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="threeCostDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="threeCostDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
export default {
    mixins: [tableStyles],
    data() {
        return {
            currentYears:"",
            handleClickNum:"成本总表",
            //二级科目名称
            header: ['主营业务成本', '其他业务成本', '营业外支出'],
            optionsList:[
                {
                    title: '成本总表',
                    name: '成本总表',
                }, {
                    title: '总部',
                    name: '总部',
                }, {
                    title: '部门',
                    name: '部门',
                }, {
                    title: '项目1',
                    name: '项目1',
                }, {
                    title: '项目2',
                    name: '项目2',
                }
            ],
            //二级科目数据
            tableData: [{
                January: '0',
                February: '0',
                March: '0',
                April: '0',
                May: '0',
                June: '0',
                July: '0',
                August: '0',
                September: '0',
                October: '0',
                November: '0',
                December: '0',
                sum:"0"
            },{
                January: '0',
                February: '0',
                March: '0',
                April: '0',
                May: '0',
                June: '0',
                July: '0',
                August: '0',
                September: '0',
                October: '0',
                November: '0',
                December: '0',
                sum:"0"
            },{
                January: '0',
                February: '0',
                March: '0',
                April: '0',
                May: '0',
                June: '0',
                July: '0',
                August: '0',
                September: '0',
                October: '0',
                November: '0',
                December: '0',
                sum:"0"
            }],
            costDetailDialog:false,//费用明细
            costDetailList:[
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
            ],
            //三级科目
            threeCostDetailDialog:false,
            threeCostDetailList:[
                {data:"2021/8",department:"研发部",userName:"张三",money:"200",remark:""},
                {data:"2021/8",department:"研发部",userName:"张三",money:"200",remark:""},
                {data:"2021/8",department:"研发部",userName:"张三",money:"200",remark:""},
                {data:"2021/8",department:"研发部",userName:"张三",money:"200",remark:""},
                {data:"2021/8",department:"研发部",userName:"张三",money:"200",remark:""},
            ]
        }
    },
    computed:{
        fatherMeanName: {
            get () {
            return this.$store.state.common.fatherMeanName
            }
        },
    },
    mounted(){
        this.getCurrentTime();
    },
    methods:{
        // 表格 表头纵向现实
        indexMethod(index) {
            return this.header[index]
        },
        //选项卡点击
        handleClick() {

        },
        // 获取当前时间（年份）
        getCurrentTime() {
        　　this.currentYears = new Date().getFullYear(); 
        },
        //金额明细
        amountDetails(row, column, event, cell){
            console.log(row);
            this.costDetailDialog=true;
        },
        threeAmountDetails(row, column, event, cell){
            console.log(row);
            this.threeCostDetailDialog=true;
        },
        //总表合计
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计 (元)';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    sums[index] += ' ';
                } else {
                    sums[index] = '';
                }
                });

                return sums;
            }
    }
}
</script>
<style scoped>

</style>
